<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrapNo">
						<view class="item-title">团购券ID：</view>
						<input placeholder="请输入团购券ID" placeholder-class="placeholderclass" v-model="groupId"/>
					</view>
					<view class="remaks-box">
						需从{{type==2?'美团':'抖音'}}开店宝-团单管理中获取。
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">团单名称：</view>
						<input placeholder="请输入团单名称" placeholder-class="placeholderclass" v-model="groupInfo.title" maxlength="50"/>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">原价：</view>
						<input placeholder="请输入团购券原价" placeholder-class="placeholderclass" v-model="groupInfo.original_price" type="digit"/>
						元
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">团购价：</view>
						<input placeholder="团购价" placeholder-class="placeholderclass" v-model="groupInfo.reality_price" type="digit"/>
						元
					</view>
					<block v-if="type==1">
						<view class="info-item flexWrapNo">
							<view class="item-title">使用时长：</view>
							<input placeholder="请输入0或正整数" placeholder-class="placeholderclass" v-model="groupInfo.duration" type="number"/>
							小时
						</view>
					</block>
					<view class="info-item flexWrapNo" v-if="type==2">
						<view class="item-title">使用时长：</view>
						<input placeholder="请输入0或正整数" placeholder-class="placeholderclass" style="text-align: center;width: 210rpx;flex: initial;" v-model="groupInfo.duration" type="number"/>
						<text style="font-size: 24upx;">小时</text>
						<input placeholder="请输入0-59的整数" placeholder-class="placeholderclass" style="text-align: center;" v-model="groupInfo.minute" type="number"/>
						<text style="font-size: 24upx;">分钟</text>
					</view>
					<view class="remaks-box">
						设置团购券的总使用时长，请确保与{{type==2?'美团':'抖音'}}设置一致
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">每日可用小时：</view>
						<input placeholder="请输入0-99的正整数" placeholder-class="placeholderclass" v-model="groupInfo.available_hours" type="number"/>
						小时
					</view>
					<view class="remaks-box">
						备注：输入0代表不限制。
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">每日可用次数：</view>
						<input placeholder="请输入0-99的正整数" placeholder-class="placeholderclass" v-model="groupInfo.available_num" type="number"/>
						次
					</view>
					<view class="remaks-box">
						备注：输入0代表不限制。
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">核销上限：</view>
						<input placeholder="请输入0-99的正整数" placeholder-class="placeholderclass" v-model="groupInfo.capping" type="number"/>
						小时
					</view>
					<view class="remaks-box">
						备注：每个账户可核销此团单的总时长，通常用于新客专享限用一次设置。输入0代表不限制。
					</view>
					<view class="info-item flexWrap">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">可用台桌：</view>
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrapNo" v-if="index==1">
						<view class="item-title"></view>
						<view class="select-box flexWrap">
							<view class="select-item flexWrapNo" v-for="(item,index) in tableList" :key="index" @tap="selectTable(index)">
								<image src="../../static/order/select-icon.png" class="select-icon" v-if="item.check"></image>
								<image src="../../static/order/notselect-icon.png" class="select-icon" v-else></image>
								<text>{{item.equipment_name}}</text>
							</view>
						</view>
					</view>
					<view class="info-item flexWrap">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">使用日期限制：</view>
							<picker @change="limitChange" :value="limitIndex" :range="limitArray" range-key="name">
								<view class="uni-input">{{limitArray[limitIndex].name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrapNo" v-if="limitIndex==1">
						<view class="item-title"></view>
						<view class="select-box flexWrap">
							<view class="select-item flexWrapNo" v-for="(item,index) in weekList" :key="index" @tap="selectWeek(index)">
								<image src="../../static/order/select-icon.png" class="select-icon" v-if="item.check"></image>
								<image src="../../static/order/notselect-icon.png" class="select-icon" v-else></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="info-item flexWrap">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">使用时间限制：</view>
							<picker @change="timeLimitChange" :value="timeLimitIndex" :range="timeLimitArray" range-key="name">
								<view class="uni-input">{{timeLimitArray[timeLimitIndex].name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrap" v-if="timeLimitIndex!=0">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">时间段：</view>
							<view class="flexWrap">
								<picker mode="time" :value="starTime" start="00:00" end="24:00" :data-index='0'
									:data-arrIndex="index" @change="bindTimeChange" style="flex: none;">
									<view class="select-input" v-if="starTime">{{starTime}}</view>
									<view class="select-input" v-else>请选择时间</view>
								</picker>
								<text class="small">至</text>
								<picker mode="time" :value="endTime" start="00:00" end="24:00" :data-index='1'
									:data-arrIndex="index" @change="bindTimeChange" style="flex: none;">
									<view class="select-input" v-if="endTime">{{endTime}}</view>
									<view class="select-input" v-else>请选择时间</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="remaks-box">
						备注：使用日期与使用时间限制需与{{type==2?'美团':'抖音'}}设置一致，避免产生纠纷。
					</view>
					<!-- <view class="info-item flexWrap">
						<view class="item-title">备注：</view>
						<textarea v-model="groupInfo.remarks"></textarea>
					</view> -->
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="editGroupBuyingPro()">提交保存</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import tools from '../../common/lib/tools';
	export default {
		data() {
			return {
				pageOpc: 0,
				array: ['全部可用', '部分可用'],
				index: 0,
				tableIndex:0,
				title:"",
				tableList:[],
				limitArray:[
					{
						name:'全部日期可用',
						value:'whole'
					},
					{
						name:'自定义日期',
						value:'weekly'
					}
				],
				limitIndex:0,
				timeLimitArray:[
					{
						name:'全部时间可用',
						value:'unlimited'
					},
					{
						name:'指定时间段可用',
						value:'limit'
					},
					{
						name:'指定时间段不可用',
						value:'appoint_unavailable'
					}
				],
				timeLimitIndex:0,
				weekList:[
					{
						name:"星期一",
						check:false,
						value:"monday"
					},
					{
						name:"星期二",
						check:false,
						value:"tuesday"
					},
					{
						name:"星期三",
						check:false,
						value:"wednesday"
					},
					{
						name:"星期四",
						check:false,
						value:"thursday"
					},
					{
						name:"星期五",
						check:false,
						value:"friday"
					},
					{
						name:"星期六",
						check:false,
						value:"saturday"
					},
					{
						name:"星期天",
						check:false,
						value:"sunday"
					}
				],
				starTime:"",
				endTime:"",
				type:0,
				id:"",
				groupInfo:{
					capping:"",
					title:"",
					original_price:"",
					reality_price:"",
					date_limit_data:"whole",
					single_purchase_limit_data:"unlimited",
					available_weekly_data:"",
					purchase_quantity:{
						start_time:"",
						end_time:""
					}
				},
				groupId:"",
				old_douyin_id:"",
				old_meituan_id:""
			}
		},
		onLoad(ops) {
			this.type=ops.type
			this.id=ops.id
			if(ops&&ops.id){
				this.getGroupInfo();
			}else{
				for (let i in this.weekList) {
					if(i<=4){
						this.weekList[i].check=true
					}
				}
				this.getList();
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			limitChange(e){
				this.limitIndex = e.detail.value
				this.groupInfo.date_limit_data=this.limitArray[this.limitIndex].value
			},
			timeLimitChange(e){
				this.timeLimitIndex = e.detail.value
				this.groupInfo.single_purchase_limit_data=this.timeLimitArray[this.timeLimitIndex].value
			},
			changeTable(e){
				this.tableIndex=e.detail.value
			},
			selectTable(index){
				this.tableList[index].check=!this.tableList[index].check
			},
			selectWeek(index){
				this.weekList[index].check=!this.weekList[index].check
			},
			// 选择时间
			bindTimeChange(e) {
				let index = e.target.dataset.index
				if (index == 0) {
					this.starTime = e.target.value
				} else {
					this.endTime = e.target.value
				}
			},
			// 获取台桌
			getList(){
				this.$tools.loadIng()
				this.$request.post(this.$api.smartEquipmentList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						for (let i in data.list) {
							data.list[i].check=false
						}
						this.tableList=data.list
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			getGroupInfo(){
				this.$request.post(this.$api.groupInfo, {
					store_id: uni.getStorageSync('store_id'),
					type:this.type,
					id:this.id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.groupInfo=data.group_buying_info
						if(this.type==2){
							this.groupId=this.groupInfo.meituan_id
							this.old_meituan_id=this.groupInfo.meituan_id
						}else{
							this.groupId=this.groupInfo.goods_id
							this.old_douyin_id=this.groupInfo.goods_id
						}
						for (let i in data.store_equipment_list) {
							data.store_equipment_list[i].check=false
						}
						this.limitIndex=this.groupInfo.date_limit_data=="whole"?0:1
						this.timeLimitIndex=this.timeLimitArray.findIndex((item)=>item.value==this.groupInfo.single_purchase_limit_data)
						this.starTime=this.groupInfo.purchase_quantity?this.groupInfo.purchase_quantity.start_time:""
						this.endTime=this.groupInfo.purchase_quantity?this.groupInfo.purchase_quantity.end_time:""
						this.groupInfo.purchase_quantity=this.groupInfo.purchase_quantity?this.groupInfo.purchase_quantity:{}
						this.tableList=data.store_equipment_list
						if(data.usable_desk_ids.length!=0){
							for (var i = 0; i <this.tableList.length; i++) {
								for (var j = 0; j <data.usable_desk_ids.length; j++) {
									if (data.usable_desk_ids[j]==this.tableList[i].id) {
										this.tableList[i].check=true
										console.log(this.tableList[i].check)
									}
								}
							}
							if(this.tableList.length==data.usable_desk_ids.length){
								this.index=0
							}else{
								this.index=1
							}
						}else{
							this.index=1
						}
						if(this.groupInfo.available_weekly_data){
							let weekList=this.groupInfo.available_weekly_data.split(',')
							for (var i = 0; i <this.weekList.length; i++) {
								for (var j = 0; j <weekList.length; j++) {
									if (weekList[j]==this.weekList[i].value) {
										this.weekList[i].check=true
									}
								}
							}
						}
					}
				})
			},
			editGroupBuyingPro(){
				if(!this.groupId){
					this.$tools.showToast('团购id不能为空')
					return;
				}
				if(!this.groupInfo.title){
					this.$tools.showToast('团单名称不能为空')
					return;
				}
				if(this.$tools.containsWildcard(this.groupInfo.title)){
					this.$tools.showToast('名称不能包含特殊字符')
					return;
				}
				if(!this.groupInfo.original_price){
					this.$tools.showToast('请填写原价')
					return;
				}
				if(!this.groupInfo.reality_price){
					this.$tools.showToast('请填写实际售价')
					return;
				}
				if(this.groupInfo.duration===""){
					this.$tools.showToast('请填写使用时长')
					return;
				}
				if(this.type==2&&this.groupInfo.minute===""){
					this.$tools.showToast('请填写使用分钟')
					return;
				}
				if(this.type==2&&this.groupInfo.minute>59){
					this.$tools.showToast('请填写0-59的整数')
					return;
				}
				if(this.type==2&&this.groupInfo.duration==0&&this.groupInfo.minute==0){
					this.$tools.showToast('小时和分钟不可同时为0')
					return;
				}
				if(!this.groupInfo.available_hours&&this.groupInfo.available_hours==""&&this.groupInfo.available_hours!==0){
					this.$tools.showToast('请填写每日可用时长')
					return;
				}
				if(!this.groupInfo.available_num&&this.groupInfo.available_num==""&&this.groupInfo.available_num!==0){
					this.$tools.showToast('请填写每日可用次数')
					return;
				}
				if(!this.groupInfo.capping&&this.groupInfo.capping==""&&this.groupInfo.capping!==0){
					this.$tools.showToast('请填写核销上限')
					return;
				}
				if(this.groupInfo.capping<0||this.groupInfo.capping>99){
					this.$tools.showToast('核销上限为0-99')
					return;
				}
				let usable_desk_ids=[]
				let unavailable_desk_ids=[]
				let week_data=[]
				if(this.index==0){
					for (let i in this.tableList) {
						this.tableList[i].check=true
					}
				}
				for (let i in this.tableList) {
					if(this.tableList[i].check){
						usable_desk_ids.push(this.tableList[i].id)
					}else{
						unavailable_desk_ids.push(this.tableList[i].id)
					}
				}
				if(this.index==1&&usable_desk_ids.length==0){
					this.$tools.showToast('请选择台桌')
					return;
				}
				for (let i in this.weekList) {
					if(this.weekList[i].check){
						week_data.push(this.weekList[i].value)
					}
				}
				if(this.type==2){
					this.groupInfo.meituan_id=this.groupId
					this.groupInfo.old_meituan_id=this.old_meituan_id
				}else{
					this.groupInfo.douyin_id=this.groupId
					this.groupInfo.old_douyin_id=this.old_douyin_id
				}
				console.log(this.groupInfo.purchase_quantity)
				let purchase_quantity={}
				this.groupInfo.purchase_quantity.start_time=this.starTime
				this.groupInfo.purchase_quantity.end_time=this.endTime
				this.groupInfo.store_id=uni.getStorageSync('store_id')
				purchase_quantity=JSON.stringify(this.groupInfo.purchase_quantity)
				this.groupInfo.purchase_quantity=purchase_quantity
				this.groupInfo.available_weekly_data=week_data
				let requestData=this.groupInfo
				requestData.type=this.type
				requestData.usable_desk_ids=usable_desk_ids
				requestData.unavailable_desk_ids=unavailable_desk_ids
				let requestUrl=""
				if(this.id){
					requestUrl=this.$api.editGroupBuyingPro
				}else{
					requestUrl=this.$api.addGroupBuyingPro
				}
				this.$request.post(requestUrl,requestData, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('操作成功')
						let pages = getCurrentPages(); //当前页
						let beforePage = pages[pages.length - 2]; //上个页面
						beforePage.$vm.groupBuyingList()
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}else{
						this.groupInfo.purchase_quantity=JSON.parse(this.groupInfo.purchase_quantity)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 30upx;
		padding-bottom: 200upx;
		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;
				align-items: flex-start;
				&:nth-last-of-type(1){
					border-bottom: none;
				}
				.item-title{
					min-width: 140upx;
					flex: none;
				}
				.small {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin: 0 40upx;
				}
				picker{
					flex: 1;
					// flex: none;
				}
				.select-input{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}
				textarea{
					background: #1D1C5C;
					border-radius: 16upx;
					padding: 30upx;
					height: 140upx;
				}
				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}
				.select-box{
					flex-wrap: wrap;
					.select-item{
						font-size: 28upx;
						color: #FFFFFF;
						margin-bottom: 20upx;
						width: 50%;
						align-items: flex-start;
						.select-icon{
							width: 48upx;
							height: 48upx;
							margin-right: 10upx;
							flex: none;
						}
					}
				}
			}
			.remaks-box{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 138upx;
				margin-top: 12upx;
			}
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
